<template>
	<div class="cc-pagination cc-flex flex-v" :style="{ height: store.appStore?.layout.mainBodyHeight }">
		<div class="header flex-0 cc-flex flex-h-between" ref="tableHeaderDom">
			<div>
				<el-form-item>
					<el-button type="primary" @click="addOrUpdateHandle()">新增</el-button>
					<el-button type="primary" @click="deleteBatchHandle()">删除所选</el-button>
				</el-form-item>
			</div>
			<div>
				<el-form :inline="true" :model="state.queryForm">
					<el-form-item label="角色名称">
						<el-input v-model="state.queryForm.name"></el-input>
					</el-form-item>
					<!-- <el-form-item label="类型">
						<el-select v-model="state.queryForm.type" placeholder="请选择">
							<el-option v-for="item in EDemoTypeList" :key="item.value" :label="item.name" :value="item.value" />
						</el-select>
					</el-form-item> -->
					<el-form-item>
						<el-button type="primary" @click="getDataList">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="table-body flex-v-100">
			<el-table
				v-loading="state.dataListLoading"
				:data="state.dataList"
				:style="{ width: '100%', height: tabelHeight }"
				:height="tabelHeight"
				@selection-change="selectionChangeHandle"
				@sort-change="sortChangeHandle"
			>
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column prop="name" label="名称" width="150"></el-table-column>
				<!-- <el-table-column prop="code" label="代码" width="200"></el-table-column> -->
				<el-table-column label="绑定功能">
					<template #default="scope">
						<div>{{ scope.row.functions }}</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" width="150">
					<template #default="scope">
						<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
						<el-button type="text" size="small" @click="deleteBatchHandle(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="footer flex-0" ref="tableFooterDom">
			<el-pagination
				:current-page="state.current"
				:page-sizes="state.pageSizes"
				:page-size="state.size"
				:total="state.total"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="sizeChangeHandle"
				@current-change="currentChangeHandle"
			>
			</el-pagination>
		</div>

		<!-- 新增 / 修改 -->
		<add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, computed } from 'vue'
import store from '@/store'
import { useRouter } from 'vue-router'
import AddOrUpdate from './role-edit.vue'
import { MPaginationOption, PaginationHook } from '@/modules/common'
import { MRole, PermissionService } from '@/modules/permission'

onMounted(() => {})
const router = useRouter()
const state: MPaginationOption = reactive({
	dataListMethod: PermissionService.getRoleList,
	deleteUrl: '/yxd/oa/role/delete',
	queryForm: {
		name: ''
		// code: ''
	}
})

const addOrUpdateRef = ref()
function addOrUpdateHandle(role?: MRole) {
	addOrUpdateRef.value.init(role)
}

const {
	getDataList,
	sizeChangeHandle,
	selectionChangeHandle,
	sortChangeHandle,
	currentChangeHandle,
	deleteBatchHandle,
	tabelHeight,
	tableHeaderDom,
	tableFooterDom
} = PaginationHook(state)
</script>

<style scoped lang="scss">
.cc-pagination {
	.header {
		background-color: #eee;
		padding: 8px 0px 0px 8px;
		margin: 0px 0px -8px 0px;
	}
	.footer {
		background-color: #f1f1f1;
		padding: 4px;
	}
}
</style>
